@import "../../style/publicsh";
.open-payment {
  .mask {
    z-index: 999999 !important;
    transform: translateZ(1px);
  }
  .picker {
    z-index: 1000000 !important;
    transform: translateZ(2px);
  }
  .header {
    position: static;
    z-index: 0;
  }

  .sl-cwts:before {
    background: #fff;
    border-radius: 50%;
  }
  .step3 {
    @include remCalc(margin-top, 20);
    .ct {
      .input-item-last {
        @include remCalc(padding, 0, 0, 0, 30);
        .itemBox {
          
          @include remCalc(padding, 22, 0, 22, 0);
          .item {
            @include remCalc(padding, 0, 30, 0, 0);
   
            .label {
              i {
                @include remCalc(font-size, 72);
                &.zfb-icon {
                  color: $color-blue;
                }
                &.wx-icon {
                  color: #1ec36b;
                }
                &.yl-icon {
                  color: #018f98;
                }
                &.ysf-icon {
                  color: #ee3a31;
                }
              }
            }
          }
          .item-common {
            @include remCalc(padding, 10, 30, 10, 0);
          }
          .item-space {
            @include remCalc(padding, 20, 30, 20, 0);
            @include thin-border(false, false, bottom);
            &:last-child:after {
              display: none;
            }
          }
        }
      }
    }
  }
  .progress-bar {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    @extend %box-sizing;
    width: pw(355);
    margin: pw(10) auto 0;
    border-radius: pw(10);
    @include remCalc(padding, 30, 50);
    @include remCalc(font-size, 28);
    // @include thin-border(false, false, bottom);
    &.progress-bar-nostep2 {
      @include remCalc(padding, 30, 192);
    }
    .step {
      text-align: center;
      color: #999;
    }
    .ongoing {
      color: #FF221A;
      img {
        @include remCalc(width, 30);
        @include remCalc(height, 30);
        @include remCalc(margin-bottom, 20);
      }
    }
    .wait {
      img {
        @include remCalc(width, 30);
        @include remCalc(height, 30);
        @include remCalc(margin-bottom, 20);
      }
    }
    .finish {
      color:#333;
      img {
        @include remCalc(width, 30);
        @include remCalc(height, 30);
        @include remCalc(margin-bottom, 20);
      }
    }
    .split-line {
      flex: 1;
      position: relative;
    }

    .split-line:after {
      content: "";
      position: absolute;
      height: 1px;
      @include remCalc(top, -30);
      @include remCalc(left, -30);
      border-bottom: 1px solid #dddddd;
      transform: scaleY(0.5);
      transform-origin: 0 0;
      @include remCalc(width, 205);
    }
    .split-toLeftLine:after {
      content: "";
      position: absolute;
      height: 1px;
      @include remCalc(top, -30);
      border-bottom: 1px solid #dddddd;
      transform: scaleY(0.5);
      transform-origin: 0 0;
      @include remCalc(width, 205);
      @include remCalc(left, -60);
    }
    .finish-line {
      flex: 1;
      position: relative;
    }
    .finish-line:after {
      content: "";
      position: absolute;
      height: 1px;
      @include remCalc(top, -30);
      @include remCalc(left, -30);
      border-bottom: 1px solid $color-blue;
      transform: scaleY(0.5);
      transform-origin: 0 0;
      @include remCalc(width, 205);
    }
    .finish-toLeftLine:after {
      content: "";
      position: absolute;
      height: 1px;
      @include remCalc(top, -30);
      border-bottom: 1px solid $color-blue;
      transform: scaleY(0.5);
      transform-origin: 0 0;
      @include remCalc(width, 205);
      @include remCalc(left, -60);
    }
    .toLeftLine:after {
      content: "";
      position: absolute;
      height: 1px;
      @include remCalc(top, -30);
      border-bottom: 1px solid #dddddd;
      transform: scaleY(0.5);
      transform-origin: 0 0;
      @include remCalc(width, 205);
      @include remCalc(left, -60);
    }
  }
}
.selectBranch {
  .list {
    background: #fff;
    @include remCalc(padding-left, 30);
    @include remCalc(margin-top, 20);
    .list-item {
      display: flex;
      align-items: center;
      @include thin-border(false, false, bottom);
      @include remCalc(line-height, 45);
      @include remCalc(font-size, 32);
      @include remCalc(height, 88);
      word-wrap: break-word;
      word-break: break-all;
      @include remCalc(padding, 0, 30, 0, 0);
    }
    .last-list-item:after {
      border: 0;
    }
  }
  .list:after {
    content: "";
    position: absolute !important;
    @include remCalc(bottom, 0);
    @include remCalc(left, 30);
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #dddddd;
    transform: scaleY(0.5);
    transform-origin: 0 0;
  }
}
.selectFeel {
  width: 100%;
  height: 100%;
  .warning {
    display: flex;
    align-items: center;
    background: #fff7ea;
    color: #eea424;
    @include remCalc(padding, 17, 30);
    @include remCalc(font-size, 26);
    @include remCalc(line-height, 36);
    .sl-flbgz {
      @include remCalc(margin-right, 10);
    }
  }
  .warn-text {
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 32);
    color: #999999;
    @include remCalc(margin-top, -10);
    @include remCalc(margin-bottom, 10);
  }
  .ct {
        .itemBox {
          .item {
            .icon{
              @include remCalc(margin-right, 12);
            }
            i {
              @include remCalc(font-size, 44);
              &.zfb-icon {
                color: $color-blue;
              }
              &.wx-icon {
                color: #1ec36b;
              }
              &.yl-icon {
                color: #018f98;
              }
              &.ysf-icon {
                color: #ee3a31;
              }
              &.sl-cwts{
                @include remCalc(font-size, 32);
              }
            }
          }
        }

  }

  .fee-box {
    @include thin-border(false, false, bottom);
    @include remCalc(min-height, 88);
    display: flex;
    @include remCalc(font-size, 32);
    @include remCalc(padding, 0, 30,0, 0);
    @include remCalc(margin-left, 30);
    box-sizing: border-box;
    color: #333;
    position: relative;
    .mask {
      z-index: 999999 !important;
      transform: translateZ(1px);
    }
    .picker {
      z-index: 1000000 !important;
      transform: translateZ(2px);
    }
    i.sl-right_arrow {
      color: #ccc;
      @include remCalc(font-size, 28);
      @include remCalc(margin-top, 10);
    }
    .move-down {
      @include remCalc(margin, 12, 0, 0, 0);
    }
    .is-support {
      color: #ccc;
      @include remCalc(font-size, 30);
      @include remCalc(margin, 12, 10, 0, 0);
    }
    &.readOnly {
      color: #ccc !important;
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
    &:nth-child(3) {
      .perce {
        @include remCalc(padding-top, 3);
      }
    }
    &.upload-img {
      display: list-item;
      > span {
        display: block;
      }
      > div {
        display: block;
        text-align: left;
        .upload-list {
          display: flex;
          li {
            @include remCalc(margin-right, 30);
          }
        }
        .upload-tip {
          @include remCalc(font-size, 24);
          @include remCalc(padding, 14, 0, 20, 0);
          box-sizing: border-box;
          color: #999;
          span {
            color: $color-blue;
            @include remCalc(padding, 0, 8);
          }
        }
        .upload-btn {
          @include remCalc(width, 120);
          @include remCalc(height, 120);
          @include remCalc(border-radius, 6);
          border: 1px solid $color-border;
          position: relative;
          &::before {
            content: "";
            @include remCalc(width, 64);
            @include remCalc(height, 4);
            position: absolute;
            background: #ddd;
            @include remCalc(left, 28);
            @include remCalc(top, 58);
          }
          &::after {
            content: "";
            @include remCalc(height, 64);
            @include remCalc(width, 4);
            position: absolute;
            background: #ddd;
            @include remCalc(top, 28);
            @include remCalc(left, 58);
          }
        }
        .upload-wrap {
          position: relative;
          img {
            // @include remCalc(width, 120);
            width: auto;
            @include remCalc(height, 120);
          }
          i {
            position: absolute;
            @include remCalc(top, -16);
            @include remCalc(right, -16);
            color: #ddd;
            background: #fff;
            border-radius: 50%;
            &::after {
              content: "";
              $size: -16;
              position: absolute;
              @include remCalc(top, $size);
              @include remCalc(bottom, $size);
              @include remCalc(left, $size);
              @include remCalc(right, $size);
            }
          }
        }
      }
    }
    > span {
      min-width: 4rem;
      // @include remCalc(min-width, 200);
      @include remCalc(padding-top, 22);
      .tip {
        @include remCalc(font-size, 22);
        color: #999;
        @include remCalc(padding-top, 12);
        .sl-flbgz {
          color: #f86e21;
          @include remCalc(padding-right, 4);
        }
      }
    }
    .no-select {
      color: #999;
    }
    .form-style-right-box {
      flex:1;
      text-align: right;
      .form-style-right {
        @include remCalc(margin-bottom, 56);
        &:last-child {
          @include remCalc(margin-bottom, 0);
        }
      }
    }
    .selectPicker,
    .form-style-right {
      flex: 1;
      text-align: right;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      .area {
        .select-btn {
          @include remCalc(margin, 14, 0, 0, 0);
          &:first-child {
            margin-top: 0;
          }
        }
      }
      > input {
        text-align: right;
        height: 100%;
        color: #ccc;
        @include remCalc(font-size, 32);
        &.input-thin {
          @include remCalc(width, 100);
          @include remCalc(padding, 4, 0);
          // @include remCalc(margin, -20, 0);
          // & + span {
          //   @include remCalc(padding, 0, 20);
          // }
        }
      }
      .unit {
        @include remCalc(font-size, 30);
        color: #333;
      }
      .above {
        color: #151515;
        @include remCalc(padding, 0, 20);
      }
      .select-btn {
        color: #ccc;
        i {
          @include remCalc(font-size, 26);
          @include remCalc(margin-left, 8);
        }
      }
      .idCardPicker {
        height: 100%;
        display: flex;
        align-items: center;
        @include remCalc(font-size, 32);
        .null-text {
          color: #d4d4d4;
        }
        span {
          & + span {
            @include remCalc(padding, 0, 0, 0, 10);
          }
        }
      }
      &.selectPicker {
        display: flex;
        align-items: center;
        flex: 1;
        text-align: right;
        color: #999;
        @include remCalc(font-size, 32);
        @include remCalc(line-height, 44);
        > i {
          @include remCalc(font-size, 20 !important);
          @include remCalc(margin-left, 8);
        }
      }
    }
    .form-style-right2{
      @include remCalc(padding, 22,0);
      .area {
        .select-btn {
          @include remCalc(margin, 14, 0, 0, 0);
          &:first-child {
            margin-top: 0;
          }
        }
      }
      > input {
        text-align: right;
        height: 100%;
        color: #ccc;
        @include remCalc(font-size, 32);
        &.input-thin {
          @include remCalc(width, 100);
          @include remCalc(padding, 4, 0);
          // @include remCalc(margin, -20, 0);
          // & + span {
          //   @include remCalc(padding, 0, 20);
          // }
        }
      }
      .unit {
        @include remCalc(font-size, 30);
        color: #333;
      }
      .above {
        color: #151515;
        @include remCalc(padding, 0, 20);
      }
      .select-btn {
        color: #ccc;
        i {
          @include remCalc(font-size, 26);
          @include remCalc(margin-left, 8);
        }
      }
      .idCardPicker {
        height: 100%;
        display: flex;
        align-items: center;
        @include remCalc(font-size, 32);
        .null-text {
          color: #d4d4d4;
        }
        span {
          & + span {
            @include remCalc(padding, 0, 0, 0, 10);
          }
        }
      }
      &.selectPicker {
        display: flex;
        align-items: center;
        flex: 1;
        text-align: right;
        color: #999;
        @include remCalc(font-size, 32);
        @include remCalc(line-height, 44);
        > i {
          @include remCalc(font-size, 20 !important);
          @include remCalc(margin-left, 8);
        }
      }
    }
    &.remark {
      display: block;
      span {
        display: block;
      }
      div {
        @include remCalc(margin-top, 10);
        textarea {
          width: 100%;
          color: #ccc;
          @include remCalc(font-size, 32);
        }
      }
    }
  }
}
.result {
  p {
    @include remCalc(font-size, 36);
    color: #000;
  }
}
